<template>
  <el-dialog :title="title" :visible.sync="dialog_visible" center width="620px"  :close-on-click-modal="false" :close-on-press-escape="false">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础信息" name="first">
          <div class="details">
            <el-row :gutter="24">
              <el-col :span="4"><div class="title">实例编号</div></el-col>
              <el-col :span="8"><div class="content">{{instance.id}}</div></el-col>
              <el-col :span="4"><div class="title">实例名称</div></el-col>
              <el-col :span="8"><div class="content">{{instance.name}}</div></el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="4"><div class="title">实例备注</div></el-col>
              <el-col :span="8"><div class="content">{{instance.description}}</div></el-col>
              <el-col :span="4"><div class="title"> 集群名称</div></el-col>
              <el-col :span="8"><div class="content">{{get_cluster_name_by_id(instance.clusterId)}}</div></el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="4"><div class="title"> 计算方案</div></el-col>
              <el-col :span="8"><div class="content">{{get_scheme_name_by_id(instance.calculationSchemeId)}}</div></el-col>
              <el-col :span="4"><div class="title">所属群组</div></el-col>
              <el-col :span="8"><div class="content">{{get_group_name_by_id(instance.groupId)}}</div></el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="4"><div class="title">实例类型</div></el-col>
              <el-col :span="8"><div class="content">  <el-tag  size="mini">{{instance.type}}</el-tag> </div></el-col>
              <el-col :span="4"><div class="title">运行状态</div></el-col>
              <el-col :span="8"><div class="content"><el-tag :type="get_status_tag_type(instance.status)" size="mini">{{ instance.status }}</el-tag></div></el-col>

            </el-row>
            <el-row :gutter="24">
              <el-col :span="4"><div class="title">运行主机</div></el-col>
              <el-col :span="20"><div class="content">{{get_host_name_by_id(instance.hostId)}}</div></el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="4"><div class="title">附加光盘</div></el-col>
              <el-col :span="20"><div class="content">{{get_template_name_by_id(instance.iso)}}</div></el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="4"><div class="title"> 系统模版</div></el-col>
              <el-col :span="20"><div class="content">{{get_template_name_by_id(instance.templateId)}}</div></el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="4"><div class="title">创建时间</div></el-col>
              <el-col :span="20"><div class="content">{{ parse_date(instance.createTime) }}</div></el-col>
            </el-row>
          </div>
      </el-tab-pane>
      <el-tab-pane label="磁盘信息" name="second">
        <div class="container">
          <el-table   v-loading="volume_loading" size="small"  :data="instance_volumes">
            <el-table-column
                label="ID"
                prop="id"
                width="60">
            </el-table-column>
            <el-table-column
                label="名称"
                prop="name"
                width="130">
            </el-table-column>
            <el-table-column
                label="类型"
                prop="type"
                width="90">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.type===0?"ROOT":"DATA" }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                label="状态"
                prop="status"
                width="100">
              <template slot-scope="scope">
                <el-tag :type="get_status_tag_type(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                label="创建时间"
                prop="createTime"
                width="150"
                >
              <template slot-scope="scope">
                <span>{{ parse_date(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="网络信息" name="third">
        <div class="container">
          <el-table   v-loading="network_loading" size="small"  ref="filterTable" :data="instance_network_interfaces" >
            <el-table-column
                label="ID"
                prop="id"
                width="60">
            </el-table-column>
            <el-table-column
                label="MAC"
                prop="mac"
                width="140">
            </el-table-column>
            <el-table-column
                label="IP"
                prop="ip"
                width="120">
            </el-table-column>
            <el-table-column
                label="创建时间"
                prop="createTime"
                width="150">
              <template slot-scope="scope">
                <span>{{ parse_date(scope.row.createTime) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-popconfirm title="确认卸载当前网卡？" style="margin-left: 10px"  :disabled="scope.row.device===0" @confirm="on_detach_network_interface_click(scope.row)">
                  <el-button slot="reference" plain size="mini" type="danger" :disabled="scope.row.device===0">卸载</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" style="text-align: right">
      <el-button @click="dialog_visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "InstanceDetail",
  data(){
    return {
      id:0,
      instance:{},
      activeName:"first",
      title:"",
      instance_volumes:[],
      instance_network_interfaces:[],
      dialog_visible:false,
      volume_loading:false,
      network_loading:false,
    }
  },
  methods:{
    init_data(instance,all_cluster,all_groups,all_host,all_scheme,all_template){
      this.instance=instance
      this.id=instance.id
      this.title=`${instance.description}-详情`
      this.all_cluster=all_cluster
      this.all_groups=all_groups
      this.all_host=all_host
      this.all_scheme=all_scheme
      this.all_template=all_template
      this.instance_volumes=[]
      this.instance_network_interfaces=[]
      this.volume_loading=false
      this.network_loading=false
      this.dialog_visible=true
      this.load_instance_volume()
      this.load_network_interface()
    },
    get_status_tag_type(status){
      return status === 'Ready' ? '' : 'danger'
    },
    load_instance_volume(){
      this.volume_loading=true
      this.axios_get(`/management/volume/search?clusterId=0&vmId=${this.id}&storageId=0`).then(res=>{
        this.volume_loading=false
        if(res.data.code===0&&res.data.data){
          this.instance_volumes=res.data.data
        }
      })
    },
    load_network_interface(){
      this.network_loading=true
      this.axios_get(`/management/network/vm?vmId=${this.id}`).then(res=>{
        this.network_loading=false
        if(res.data.code===0&&res.data.data){
          this.instance_network_interfaces=res.data.data
        }
      })
    },
    on_detach_network_interface_click(network){
      this.post_data(`/management/vm/detach/network`, {vmId:this.id,vmNetworkId:network.id}).then(res => {
        if (res.data.code === 0) {
          let findIndex = this.instance_network_interfaces.findIndex(item => item.id === network.id)
          this.$delete(this.instance_network_interfaces,findIndex)
        }
      })
    }
  }
}
</script>

<style scoped>
.container{
  width: 100%;
  height:320px;
  padding: 0;
  overflow: auto
}
.details .title{
  color: #99a9bf;
  font-size: 14px;
  line-height: 40px;
  width: 100%;

}
.details .content{
  color: #606266;
  font-size: 12px;
  line-height: 40px;
  width: 100%;
}
</style>